<template>
  <div class="collect-product-deploy">
    <div class="deploy-box">
      <div class="deploy-box-action">
        <el-button type="primary" size="small">批量配置</el-button>
      </div>
      <div class="deploy-box-table">
        <el-table
          ref="deployTable"
          :data="list.pconfig"
          border
          tooltip-effect="dark"
          height="500"
          style="width: 100%"
          @selection-change="deploySelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="选择颜色" width="100">
            <template slot-scope="scope">
              <span
                class="box-table-color"
                :style="{ 'background-color': scope.row.color }"
              ></span>
            </template>
          </el-table-column>
          <el-table-column label="选择规格" width="80">
            <template slot-scope="scope">{{ scope.row.spec }}</template>
          </el-table-column>
          <el-table-column prop="sku" label="产品SKU" width="120">
          </el-table-column>
          <el-table-column label="选择模板效果图">
            <template slot-scope="scope">
              <div
                class="deploy-box-table-result"
                v-loading="scope.row.id == isDeployShow"
              >
                <div class="table-result-images">
                  <draggable
                    v-if="scope.row.isShow"
                    tag="transition-group"
                    :componentData="componentData"
                    :list="scope.row.images"
                    class="list-group"
                    draggable=".item"
                    :animation="100"
                    @start="dragging = true"
                    @end="dragging = false"
                  >
                    <div
                      class="list-group-item item"
                      v-for="element in scope.row.images"
                      :key="element.file_id"
                    >
                      <img :src="element.image_url" alt="" class="image-100" />
                    </div>
                  </draggable>
                  <template v-else>
                    <div
                      class="table-result-images-list"
                      v-for="(item, index) in scope.row.images"
                      :key="index"
                    >
                      <img class="image-100" :src="item.image_url" alt="" />
                      <el-checkbox
                        class="checkbox"
                        v-model="item.state"
                        :true-label="1"
                        :false-label="0"
                      ></el-checkbox>
                    </div>
                  </template>
                </div>
                <div class="table-result-sort">
                  <el-button
                    type="primary"
                    v-if="scope.row.isShow"
                    @click="onDeploySort(scope.row, false)"
                    >保存</el-button
                  >
                  <el-button
                    type="primary"
                    v-else
                    @click="onDeploySort(scope.row, true)"
                    >调整排序</el-button
                  >
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable';
import Collect from '@/api/collect';
import Way from '@/utils/way';

export default {
  name: 'collectProductDeploy',
  components: { draggable },
  props: {
    list: {
      type: Object,
      default: () => {
        return {
          pconfig: [],
        };
      },
    },
  },
  data() {
    return {
      dragging: false,
      componentData: {
        props: {
          type: 'transition',
          name: 'flip-list',
        },
      },
      isDeployShow: -1,
    };
  },
  computed: {},
  watch: {},
  created() {},
  methods: {
    // 配置弹出框选中其
    deploySelectionChange(val) {
      console.log(val);
    },
    onDeploySort(item, isShow) {
      const that = this;
      if (!isShow) {
        console.log(item);
        this.isDeployShow = item.id;
        const paras = {
          id: item.id,
          images: item.images,
        };
        Collect.postProductConfig(paras).then((res) => {
          console.log(res);
          if (res.code == 200) {
            that.isDeployShow = -1;
          } else {
            that.isDeployShow = -1;
            Way.setMessage(res.msg, 3);
          }
        });
      }
      this.$emit('onDeploySort', item, isShow);
    },
  },
  mounted() {},
};
</script>

<style scoped lang="less">
// 配置弹窗
.collect-product-deploy {
  // height: 600px;
  // overflow-y: auto;

  /deep/ .el-dialog__body {
    padding: 20px;
    border-top: 1px solid #ebebeb;
  }
  /deep/ .el-table__cell {
    text-align: center;
  }
  .deploy-box {
    .deploy-box-action {
    }
    .deploy-box-table {
      .box-table-color {
        display: block;
        text-align: center;
        width: 50px;
        height: 20px;
        line-height: 20px;
        border-radius: 12px;
        border: 1px solid #c2c2c2;
        font-size: 12px;
      }

      // 选择模板效果图
      .deploy-box-table-result {
        display: flex;

        .table-result-images {
          flex: 2;
          display: flex;
          flex-wrap: wrap;

          .list-group {
            display: flex;
            flex-wrap: wrap;
          }

          .table-result-images-list {
            position: relative;
            margin: 0 6px 6px 0;
            width: 64px;
            height: 64px;

            .checkbox {
              position: absolute;
              left: 4px;
              bottom: 0;
            }
          }

          .list-group-item {
            margin: 0 6px 6px 0;
            width: 64px;
            height: 64px;
            cursor: move;
          }
        }
        .table-result-sort {
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
  .flip-list-move {
    transition: transform 0.5s;
  }
  .no-move {
    transition: transform 0s;
  }
}
</style>
